<template>
  <van-popup
    v-model:show="showSheet"
    position="bottom"
    round=""
    closeable
    :close-on-click-overlay="false"
    :before-close="beforeClose"
    :style="{ height: '80%' }"
  >
    <div class="flex flex-col w-full h-full" v-show="!showDetail">
      <div class="text-center mt-4 ">选择商品</div>
      <div class="flex flex-row items-center justify-between px-4 py-1">
        <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
          <template #reference>
            <div class="flex flex-row items-center text-sm" @click="onClickSelectProduct">
              {{currentCategory.name}} <van-icon name="arrow-down" size="12" class="ml-1" />
              <van-loading v-show="loading"/>
            </div>
          </template>
        </van-popover>

        <van-search
          class="flex-auto"
          v-model="searchKey"
          shape="round"
          @update:model-value="onChangeSearch"
          placeholder="请输入搜索关键词"
        />
      </div>

      <van-divider />
      <div class="flex flex-col flex-auto overflow-y-auto">
        <div
          v-if="products.length > 0"
          v-for="(item, index) in products"
          class="flex flex-row items-center justify-between px-4 py-3 w-screen box-border"
        >
          <div class="flex flex-row" @click="onSelectItem(item)">
            <van-checkbox v-model="item.checked" @click="onSelectItem(item)" />
            <div class="content ml-2 text-sm">{{ item.details[0] }}</div>
          </div>
          <div class="text-yxt-blue mr-4 text-sm" @click="onClickDetail(item)"
            >查看详情</div
          >
        </div>
        <emptyView des="暂无数据" v-else/>
      </div>

      <div
        class="flex justify-center items-center w-full pt-4 pb-2 shadow-inner "
      >
        <van-button class="w-[300px]" type="primary" szie="large" @click="onsubmit"
          >确定</van-button
        >
      </div>
    </div>


    <div class="flex flex-col w-full h-full mt-8" v-show="showDetail">
        <div class="flex flex-col px-4 mt-6" v-for="(item, index) in titles">
          <h4 class="font-bold mb-2">{{item}}</h4>
          <p class="text-sm">{{currentDetail[index]}}</p>
        </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, defineExpose, onMounted, defineProps, computed, defineEmits, watch } from "vue";
import { useOrderVisitStore } from "@/store";
import debounce from "@/utils/debounce";
import emptyView from "../../../components/emptyView.vue";
import { showToast } from "vant";
const props = defineProps({
  categoryId: {
    typeof: String,
    default: "",
  },
});


const emits = defineEmits(["onsubmit"]);

const searchKey = ref("");
const showSheet = ref(false);
const store = useOrderVisitStore();
const products = ref([]);
const titles = ref([]);
const currentDetail = ref({});
const showDropDownList = ref(false);
// const showView = ref(false);


const actions = computed(() => categorys.value.map((item) => ({ text: item.name })));
// [{ text: "选项一" }, { text: "选项二" }, { text: "选项三" }];

const loading = ref(false);
async function loadData() {
  if (!currentCategory.value.id) {
    currentCategory.value = categorys.value[0];
  }
  const params = {
    searchKey: searchKey.value,
    pageSize: 500,
    pageNumber: 1,
  };
  const id = currentCategory.value.id;
  loading.value = true;
  const data = await store.getProductListAction(id, params);
  loading.value = false; 
  products.value = data.datas;
  const preSelectedProducts = store.bindGoodsCategory.selectedProducts.map((item) => item.id);
  products.value.forEach((item) => {
    item.checked = preSelectedProducts.indexOf(item.id) !== -1;
  })
  titles.value = data.title;
}

function show() {
  loadData();
  showSheet.value = true;
}

function close() {
  showSheet.value = false;
}


function beforeClose() {
  if (showDetail.value) {
    showDetail.value = false;
    return false;
  }
  return true;
}

const selectItems = computed(() => products.value.filter((item) => item.checked))
function onsubmit() {
  if (selectItems.value.length === 0) {
    showToast("请至少选择一个产品");
    return;
  }
  emits("onsubmit", selectItems.value);
  close();
}

function onChangeSearch(v) {
  searchKey.value = v;
  debounce(() => loadData());
}

function onSelectItem(v) {
  if (selectItems.value.length >= 10 && !v.checked) {
    showToast("最多只能选择10个产品");
    return
  }
  v.checked = !v.checked;
}

const showDetail = ref(false);
function onClickDetail(v) {

  currentDetail.value = v.details;
  showDetail.value = true;
 ;
}

function onClickSelectProduct() {
 ;
  showDropDownList.value = true;
}

const categorys = computed(() => store.salesConfig.categories);
const showPopover = ref(false);
const currentCategory = ref({})

watch(categorys, () => {
  currentCategory.value = categorys.value[0];
})

function onSelect  (action) {
 ;
  const preId = currentCategory.value.id;
  currentCategory.value = categorys.value.filter((v) => action.text === v.name)[0];
  if (preId !== currentCategory.value.id) {
    loadData();
  }
  
};

// 导出方法，支持父控件ref调用
defineExpose({ show, close });
</script>

<style lang="less" scoped>
.content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

/deep/ .van-action-sheet__content {
  overflow-y: hidden;
}

.drop-list-view {
  position: absolute;
  z-index: 99999;
  top: 100px;
  width: 100%;
  height: 100%;
  left: 0;
  overflow-y: auto;

  .drop-mask {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 18px;
    height: 50px;
    width: 100%;
    background-color: white;
  }
}
</style>
